<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>CSS Registration Form</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <link rel="stylesheet" href="{{ URL::asset('css/register.css') }}" />
        <link rel="stylesheet" href="{{ URL::asset('js/validate/jquery.validate.css') }}" />
        <script type="text/javascript" src="{{ URL::asset('js/jquery-2.0.3.js') }}"> </script>
        <script type="text/javascript" src="{{ URL::asset('js/validate/jquery.validate.js') }}"> </script>
        <script type="text/javascript" src="{{ URL::asset('js/validate/jquery.validation.functions.js') }}"> </script>
    </head>
    <body>    
        <form action="/register" method="post" class="register">
            <h1>Registration</h1>
            <fieldset class="row1">
                <legend>Account Details
                </legend>
                <p>
                    <label>Username *
                    </label> 
                    <input type="text" name="username" id="username"/>
                    <label>Email Address *
                    </label>
                    <input type="email" name="email" id="email"/>
                </p>
                <p>
                    <label>Password*
                    </label>
                    <input type="password" name="password" id="password"/>
                    <label>Repeat Password*
                    </label>
                    <input type="password" name="cpassword" id="cpassword"/>
                    <label class="obinfo">* obligatory fields
                    </label>
                </p>
            </fieldset>
            <fieldset class="row2">
                <legend>Personal Details
                </legend>
                <p>
                    <label>First Name *
                    </label>
                    <input type="text" class="long" name="firstname" id="firstname"/>
                </p>
                <p>
                    <label>Last Name *
                    </label>
                    <input type="text" maxlength="10" name="lastname" id="lastname"/>
                </p>
                <p>
                    <label class="optional">Phone Number
                    </label>
                    <input type="text" class="long" name="phonenumber" id="phonenumber"/>
                </p>
                <p>
                    <label>Work Number 
                    </label>
                    <input type="text" class="long" name="worknumber" id="worknumber"/>
                </p>
                <p>
                    <label>Primary Address *
                    </label>
					<input type="text" class="long" name="address1" id="address1"/>
                </p>
                <p>

                </p>
            </fieldset>
            <fieldset class="row3">
                <legend>Payment Information
                </legend>
                <p>
                    <label>Payment Type</label>
                    <select size="1" name="billingtype">
                    	<option value="Debit Cart"> Debit Cart </option>
                    	<option value="Credit Cart"> Credit Cart </option>
                    </select>
                </p>
                <p>
                    <label>Card Number *
                    </label>
					<input type="text" name="cardnumber" id="cardnumber"/>
                </p>
                <p>
                    <label>CVV *
                    </label>
                    <input type="text" name="cvv" id="cvv"/>
                </p>
                <p>
                    <label>Expire Date *
                    </label>
                    <input type="date" value="" name="expiredate" id="expiredate"/>
                </p>
                </div>
            </fieldset>
            <fieldset class="row4">

            </fieldset>
            <div><button class="button">Register &raquo;</button></div>
        </form>
    </body>

    <script type="text/javascript">

            jQuery(function(){
                jQuery("#username").validate({
                    expression: "if (VAL) return true; else return false;",
                    message: "Please enter the Required field"
                });

                jQuery("#email").validate({
                    expression: "if (VAL) return true; else return false;",
                    message: "Please enter the Required field"
                });

                jQuery("#password").validate({
                    expression: "if (VAL) return true; else return false;",
                    message: "Please enter the Required field"
                });

                jQuery("#cpassword").validate({
                    expression: "if (VAL) return true; else return false;",
                    message: "Please enter the Required field"
                });

                jQuery("#firstname").validate({
                    expression: "if (VAL) return true; else return false;",
                    message: "Please enter the Required field"
                });

                jQuery("#lastname").validate({
                    expression: "if (VAL) return true; else return false;",
                    message: "Please enter the Required field"
                });

                jQuery("#address1").validate({
                    expression: "if (VAL) return true; else return false;",
                    message: "Please enter the Required field"
                });

                jQuery("#cardnumber").validate({
                    expression: "if (VAL) return true; else return false;",
                    message: "Please enter the Required field"
                });

                jQuery("#cvv").validate({
                    expression: "if (VAL) return true; else return false;",
                    message: "Please enter the Required field"
                });

                jQuery("#expiredate").validate({
                    expression: "if (VAL) return true; else return false;",
                    message: "Please enter the Required field"
                });

                jQuery("#costprice").validate({
                    expression: "if (!isNaN(VAL) && VAL) return true; else return false;",
                    message: "Please enter a valid number"
                });
                jQuery("#retailprice").validate({
                    expression: "if (!isNaN(VAL) && VAL) return true; else return false;",
                    message: "Please enter a valid number"
                });
                jQuery("#quantity").validate({
                    expression: "if (!isNaN(VAL) && VAL) return true; else return false;",
                    message: "Please enter a valid number"
                });
                
                jQuery('.AdvancedForm').validated(function(){
                    alert("Use this call to make AJAX submissions.");
                });
            });
    </script>
</html>
